HTML+CSS实训

2023-06-03 08:32| 来源: 网络整理| 查看: 265

仓库链接:https://github.com/MengFanjun020906/HTML_SX

一些今天需要用到的知识点弹性盒子 DOCTYPE html> Document /* 正常情况下块元素默认是垂直从上向下排列的 */ /* 但是我们有时候需求块元素水平显示 */ /* 把需要水平显示的块元素的父元素设置为弹性盒子弹性盒子内部的元素是弹性子元素弹性子元素有自己的排列方式弹性子元素默认水平排列主轴:默认水平方向从左向右,左边为起点,右边为重点弹性子元素默认沿着主轴从起点向重点排列 */ .box { width: 500px; height: 500px; border: 5px solid black; /* 设置弹性盒子 display: flex; */ display: flex; /* 设置子元素在主轴的排列方式 justify-content */ /* justify-content设置弹性盒子垂直居中 */ justify-content: center; /* aligm-items设置水平方向居中 */ align-items: center; /* 设置主轴的方向 flex-direction */ /* 主轴有四个方向: row左->右 row-reverse右->左 column上->下 column-reverse下->上 */ /* flex-direction: row; */ /* flex-direction: row-reverse; */ flex-direction: column; /* flex-direction: column-reverse; */ } .red { width: 100px; height: 100px; background-color: red; } .green { width: 100px; height: 100px; background-color: green; } .blue { width: 100px; height: 100px; background-color: blue; }

在这里插入图片描述知识点：

弹性子元素有自己的排列方式弹性子元素默认水平排列主轴:默认水平方向从左向右,左边为起点,右边为重点弹性子元素默认沿着主轴从起点向重点排列交叉轴:交叉轴方向跟主轴垂直交叉轴默认方向从上向下,上边为起点,下边为重点不管主轴从左向右还是从右向左交叉轴都是从上向下的不管主轴是从上向下还是从下向上交叉轴都是从左向右的主轴有四个方向交叉轴只有两个方向边框

通过更改border-style来改变边框的类型

DOCTYPE html> Document .i1 { width: 100px; height: 100px; border-width: 10px; border-style: solid; border-color: black; border-style: double; border-radius: 50px; }

在这里插入图片描述

盒子模型 DOCTYPE html> Document body { margin: 0; } /* 再网页中我们会把html元素想象成一个盒子 */ /* 盒子可以设置宽高,外边距,内边距 */ .i1 { width: 200px; height: 100px; border: 5px solid red; /* margin-top: 10px; */ /* margin-bottom: 20px; */ /* margin-left: 30px; */ /* margin-right: 40px; */ /* 当元素的左右外边距设置为auto可以水平居中 */ margin-left: auto; margin-right: auto; /* 上右下左 */ margin: 10px 20px 30px 40px; /* 上下左右 */ /* margin: 10px 20px; */ /* margin: 10px auto; */ /* 上左右下 */ /* margin: 10px 20px 30px; */ /* 上下左右 */ margin: 10px; } /* 内边距会撑大元素 */ .i2 { width: 170px; height: 80px; border: 5px solid red; padding-top: 20px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; } /* 普通盒子 */ /* 宽 = 设置的宽度 + 左右边框 + 左右内边距 */ /* 高 = 设置的高度 + 上下边框 + 上下内边距 */ .i3 { width: 200px; height: 100px; border: 5px solid red; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; /* 边框盒子 */ /* 宽 = 设置的宽度 */ /* 高 = 设置的高度 */ box-sizing: border-box; } 这里是内容部分这里是内容部分

在这里插入图片描述通过检查功能，我们发现i2的长度和高度再观察i3的长度，发现他们在页面是一样长的，但是实际的代码是不一样的，究其原因是因为内部的间距padding给他撑大了。

固定标签

我们在许多网页都见过固定住的导航栏，那我们该如何做这种效果呢

DOCTYPE html> Document .i1 { width: 100px; height: 100px; background-color: pink; position: fixed; left: 100px; bottom: 0px; /* top: ; */ /* right: ; */ } /* 当元素没有设置宽度或者高度的时候,元素会被拉伸 */ .i2 { height: 100px; background-color: yellow; position: fixed; left: 10px; right: 0; top: 10px; } .i3 { width: 100px; background-color: green; position: fixed; top: 0px; bottom: 0px; left: 200px; } 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123

用position: fixed; 写在css中可以让其固定在顶部

用网上的图标库

从awesomeicon网站下载他们的css，然后把命令写在head中

把这个命令写到body中

fa-camera-retro

图标就出现了在这里插入图片描述

添加底部栏

先写body的内容

发现视频我的云村账号

后面的css更重要

.tab-bar { position: fixed; left: 0; right: 0; bottom: 0; background-color: white; height: 80px; /* border: 1px solid red; */ display: flex; justify-content: space-evenly; } .tab-bar>.item{ display: flex; flex-direction: column; align-items: center; justify-content: center; } .tab-bar>.item>i{ font-size: 30px; } .tab-bar>.item>span{ margin-top: 6px; font-size: 14px; }

最后的效果就是这样的在这里插入图片描述

添加banner

html

css

.banner { margin-top: 60px; position: relative; } .banner>img { width: 100%; border-radius: 6px; } .banner>.pointer { display: flex; justify-content: center; position: absolute; bottom: 12px; left:0; right: 0; } .banner>.pointer>span { width: 10px; height: 10px; background-color: gray; margin-left: 10px; border-radius: 5px; margin-right: 4px; } .banner>.pointer>.active { background-color: rgb(0, 153, 255); }

在这里插入图片描述但是这里的banner向上移动的时候会盖住搜索栏，他的层叠结构是不太正确的，所以我们设置了z-index

.search { position: fixed; display: flex; align-items: center; justify-content: center; left: 0; right: 0; top: 0; padding-top: 10px; padding-bottom: 10px; background-color: white; z-index: 999; /* border: 1px solid red; */ } .banner { margin-top: 60px; position: relative; z-index: 2; } 添加歌单并且可以滑动

html

你的精选歌单查看更多成功人士都在听的歌曲，来看看吧～暮然回首，那人却在灯火阑珊处温馨的歌曲，适合在家听抖音热门歌曲循环学习/工作/无聊/必备歌曲乘风破浪会有时，直挂云帆济沧海/span> 赛车爱好者必听歌曲

css

.choice { margin-top: 10px; } .choice>.choice-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; color: #504e4a; } .choice>.choice-title>.right { font-size: 12px; color: #999; border-radius: 5px; border: 1; background-color: white; border-color: gray; } .choice-box { display: flex; /* 设置图像可以滚动显示 */ overflow: scroll; } /* 清除滚动条 */ .choice-box::-webkit-scrollbar { display: none; } .choice-box>.item>span { font-size: 12px; /* 让文本只显示2行,并且超出的部分显示... */ overflow: hidden !important; text-overflow: ellipsis !important; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; white-space: normal; word-wrap: break-word; } .choice-box>.item { display: flex; flex-direction: column; width: 80px; margin-right: 10px; } .choice-box>.item>img { width: 80px; border-radius: 8px; margin-bottom: 6px; } .choice-box>.item>span { font-size: 12px; }

中间加入可以滑动的功能，并且要去掉滚动条在这里插入图片描述

加入其他的功能选项

html

每日推荐歌单排行榜电台直播火前留名畅聊

css

.category>.item { display: flex; flex-direction: column; margin-top: 5px; margin-bottom: 5px; /* border: 1px solid red; */ align-items: center; justify-content: center; } .category>.item>span { font-size: 10px; } .category>.item>i { color: red; font-size: 30px; }

跟下面的tab-bar效果是一样的在这里插入图片描述

【本文地址】

HTML+CSS实训

HTML+CSS实训

今日新闻

推荐新闻